<template>
  <div class="page flex_c">
    <div class="cover">
      <img class="play_mask" src="../../assets/img/music/play_mask.png" alt="">
      <img class="cover_img" src="https://zsjl.oss-cn-beijing.aliyuncs.com/workFile/image/png/lcjlfvcapj80jlxvrqi0qfwt.png?x-oss-process=image/resize,m_fixed,h_216,w_384" alt="">
    </div>
    <p class="music_name">潜力之外</p>
    <p class="txt">2024年3月26日</p>
    <p class="type">{{ musicList[musicIndex].song_genre}}</p>
    <div class="song flex1">
      {{ musicList[musicIndex].song_lyrics.replace(/[， ]+/g, '\n')}}
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useMusicStore } from '@/store/index';
import { storeToRefs } from "pinia";
const store = useMusicStore();
const { musicIndex, musicList } = storeToRefs(store)
//   data.song_list = [
  //     {
  //   "cover_image_url": "https://zsjl.oss-cn-beijing.aliyuncs.com/workFile/image/png/lcjlfvcapj80jlxvrqi0qfwt.png?x-oss-process=image/resize,m_fixed,h_216,w_384",
  //   "dedicated_to": 0,
  //   "genre_id": 0,
  //   "id": 0,
  //   "is_like_by_me": true,
  //   "like_count": 0,
  //   "play_count": 0,
  //   "song_author": 0,
  //   "song_genre": "流行",
  //   "song_lyrics": "这是歌词啊哈哈哈手动阀手动阀颗粒剂手打饭卡里手机打卡拉法基阿萨漏打卡飞机",
  //   "song_name": "这是歌曲名",
  //   "song_status": 0,
  //   "song_url": 'https://farhugs-web-assets.farhugs.net/public/media/background.1.85d13d0d591268b08effe3d462c9fa45.mp3'
  // }
  //   ]
</script>
<style lang="scss" scoped>
.page {
  height: calc(100vh - 60px - constant(safe-area-inset-bottom));
  height: calc(100vh - 60px - env(safe-area-inset-bottom));
  background: #161616;
  padding-top: 16px;
  .cover {
    width: 180px;
    height: 180px;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    position: relative;
    .play_mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: -30px;
      animation: rotate 2s linear infinite;
      animation-play-state: running; /* 默认运行动画 */
      animation-fill-mode: forwards; /* 在动画结束时保留最后的状态 */
      &.pause {
        animation-play-state: paused; /* 添加一个类来暂停动画 */
      }

    }

    .cover_img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px 8px 8px 8px;
      display: block;
    }
  }
  .music_name {
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    margin-top: 24px;
    line-height: 32px;
  }
  .txt {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 21px;
    text-align: center;
  }
  .type {
    width: 48px;
    height: 20px;
    background: rgba(255,255,255,0.4);
    border-radius: 2px 2px 2px 2px;
    border: 1px solid rgba(255,255,255,0.1);
    margin: 16px auto 0;
    font-size: 12px;
    color: #000000;
    line-height: 20px;
    text-align: center;
  }
  .song {
    white-space: pre-wrap;
    margin-top: 16px;
    padding-bottom: 30px;
    font-size: 14px;
    color: #ADADAD;
    line-height: 25px;
    text-align: center;
    overflow-y: scroll;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }

}
</style>